<template>
  <div class="dialog-dia-root">
    <div class="wrap"></div>
    <div class="border"></div>
    <div class="cont">
      <div class="title">事件详情</div>
      <img src="../../assets/close.png" class="closebtn" @click="$emit('close')">
      <div class="line" v-for="line in lines" :class="{active: line.more}">
        <div class="title">{{line.title}}</div>
        <div class="cont" v-html="line.cont"></div>
        <div class="more" @click="line.more = !line.more"></div>
      </div>
      <div class="btns">
        <router-link to="detail" class="btn">查看详情</router-link>
      </div>
    </div>
  </div>
</template>

<script>
let mdata = [
  {title: '事件描述', cont: '美军 南海 军演', more: false},
  {title: '隶属主题', cont: '南海纷争、太平洋军演', more: false},
  {title: '事件涉及地点', cont: '南海、太平洋、华盛顿、北京', more: false},
  {title: '事件涉及时间点', cont: '2015-10-24<br>2013-11-30<br>2010-05-01<br>2004-09-21', more: true},
  {title: '事件涉及人物', cont: '奥巴马、普京', more: false},
  {title: '关联事件', cont: '朝鲜 联合国 制裁', more: false}
]

export default {
  name: 'detail-dia',
  data(){
    return {
      lines: mdata
    }
  }
}
</script>

<style lang="stylus" scoped>
corner0 = 14px
corner1 = 'calc(100% - %s)' % corner0

.dialog-dia-root
  width 400px
  position absolute
  top 250px
  left calc(50% - 200px)
  >.border
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    border-style solid
    border-width 90px 50px 50px 130px
    border-image url(./img/diaborder.png) 90 50 50 130
  >.wrap
    position absolute
    top 62px
    right 22px
    bottom 22px
    left 24px
    background-color rgba(68,128,249,.2)
    backdrop-filter: blur(4px)
    clip-path: polygon(
      corner0 0, corner1 0,
      100% corner0, 100% corner1,
      corner1 100%, corner0 100%,
      0 corner1, 0 corner0
    )

.dialog-dia-root>.cont
  position relative
  padding 86px 46px 46px 48px
  >.title
    text-align center
    color #dc2f12
    font-size 20px
    margin-bottom 24px
    &::before
    &::after
      content ''
      display inline-block
      box-sizing border-box
      height 15px
      width 15px
      border 1px solid #59b3ff
      border-radius 50%
      margin 0 10px
      box-shadow 0 0 5px 1px #036be1, inset 0 0 5px #036be1
  >.line
    display flex
    border-bottom 1px solid rgba(89,179,255,.4)
    font-size 12px
    line-height 20px
    padding 08px 0
    box-sizing border-box
    >.title
      flex 0 0 108px
      &:after
        content '：'
    >.cont
      flex auto
      height 20px
      overflow hidden
    >.more
      flex 0 0 auto
      transform scale(.8)
      color #ca5f08
      align-self flex-end
      cursor pointer
      &:before
        content '展开'
  >.line.active
    >.cont
      height auto
    >.more:before
      content '收起'
  >.btns
    margin-top 22px
    display flex
    justify-content center
    .btn
      background none
      border 1px solid #59b3ff
      padding 5px 18px
      text-decoration none
      color #59b3ff
      font-family inherit
      cursor pointer
      transition all .3s ease
      outline none
      &:hover
        background rgba(0,0,0,.1)
        box-shadow 0 0 5px 1px #036be1

.closebtn
  position absolute
  top 80px
  right 40px
  cursor pointer
    
</style>